<template>
	<view>
		<view class="itemCard" v-for="(user, index) in userList">
			<view class="content" @click="gonavigate(user)">
				<view class="img">
					<img :src="user.userpic" alt="" style="width: 50px;height: 50px;" />
				</view>
				<view class="msg">
					<view class="username">{{ user.nickname }}</view>
					<view class="usercontent">用户ID{{user.username}}，注册{{user.ip}}</view>
					<view class="time">在线</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
import { getOnline } from "@/request/api";
export default {
	data() {
		return {
			userList: [],
			isRefreshing: false // 新增：用于判断是否在刷新
		};
	},
	mounted() {
		this.fetchData(); // 调用获取数据的方法
	},
	onShow() {
	    this.fetchData();      
	},
	methods: {
		gonavigate(user) {
			uni.navigateTo({
				url: '/pages/onlineService/onlineService?username='+user.username+'&nickname='+user.nickname+'&userpic='+user.userpic
			})
		},
		fetchData() {
			if (this.isRefreshing) return; // 如果正在刷新，则不执行
			this.isRefreshing = true; // 设置正在刷新状态
			getOnline().then(res => {
				if (res.code == 200) {
					this.userList = res.data;
				}
				this.isRefreshing = false; // 无论是否成功，都重置刷新状态
				uni.stopPullDownRefresh(); // 停止下拉刷新动画
			}).catch(() => {
				this.isRefreshing = false; // 捕获错误时也要重置刷新状态
				uni.stopPullDownRefresh(); // 停止下拉刷新动画
			});
		}
	},
	onPullDownRefresh() { // 生命周期函数，处理下拉刷新
		this.fetchData();
	}
}
</script>
 
<style lang="scss" scoped>
.itemCard {
	width: 100%;
	height: 70px;
 
	.content {
		display: flex;
	}
 
	.img {
		width: 60px;
		height: 50px;
		margin-top: 10px;
		margin-left: 5px;
	}
 
	.msg {
		flex: 1;
		height: 50px;
		margin-top: 10px;
		position: relative;
		font-size: 12px;
 
		.usercontent {
			position: absolute;
			bottom: 0;
		}
 
		.username {
			font-size: 18px;
			font-weight: 800;
		}
 
		.time {
			position: absolute;
			top: 0;
			right: 10px;
		}
	}
}
</style>